<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <el-col>操作</el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 树形组件 -->
        <!--
          tree组件默认识别的字段
          label和chilren 如果后端发回来的数据不叫这个 需要自定义识别字段

          如何给组件传递属性？
           1. 不加冒号  name="this is name" 永远是字符串类型 isTrue="false" count="123"
           2. 加冒号
              使用当前组件实例身上的属性  data/computed 产出的数据
              直接识别类型的数据 boolean number 数组 对象
               <AComponent :list="[1,2,3]" :is-true="true"/>
         -->
        <el-tree :data="list" :props="defaultProps" :default-expand-all="true">
          <!--
            {data} data是固定的吗？固定的 解构赋值的写法
            #default="scope"  scope不是固定的 类似于函数的形参
            用组件都是已经写好了一半 容许我们传入参数 也给我们抛出了现成的数据

            数据调试
             1. 差值渲染
             2. 设计一个小点击事件 当成参数传入 打印
          -->
          <template #default="{ data }">
            <!-- 自定义的模板 -->
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%;"
            >
              <el-col :span="20">
                <span>
                  {{ data.name }}
                </span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>添加子部门</el-dropdown-item>
                        <el-dropdown-item>编辑部门</el-dropdown-item>
                        <el-dropdown-item>删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
  </div>
</template>

<script>
/**
 1. 获取列表渲染
 思路: 1.定义响应式数据 -> 2.调用接口获取数据 -> 3. 把数据复制给响应式的属性
 拓展问题一：created mounted 在当前的场景下 写到这俩个里面毫无差别
 mounted优势: dom可用 echarts图表渲染  百度地图渲染
 服务端渲染: 没有mounted钩子函数 不可用
 拓展问题二：为什么要单独封装一个getList
 1. 解构清晰 生命周期钩子函数都不应该包含太多的逻辑代码 初始化的调用代码
 2. 方便复用 在这个函数里面封装好更新列表的所有逻辑[参数二次处理 数据获取到赋值 二次处理响应]
 */
import { fetchDepartmentList } from '@/api/department'

import transTree from '@/utils/transTree'

export default {
  data() {
    return {
      list: [{
        name: '财务部',
        manager: '张三',
        children: [
          {
            name: '财务核算部',
            manager: '李四'
          },
          {
            name: '税务核算部',
            manager: '王五'
          }
        ]
      }],
      defaultProps: {
        label: 'name'
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await fetchDepartmentList()
      // 目标：把后端返回的平铺的数组转化成组件需要的树形数组
      // 解决问题: 1.直接搜方案 2.自己写
      this.list = transTree(res.depts)
    }
  }
}
</script>
